import './AdminHomeSelect.scss'
import { Collapse } from 'antd'

import { useMount } from 'ahooks'
import PropTypes from 'prop-types'
import { useState } from 'react'


import { AdminHomeTempList, AdminHomeRenderList } from '../../Config/homeList'

const AdminHomeSelect = ({ ModalEvent }) => {
    AdminHomeSelect.propTypes = { ModalEvent: PropTypes.object }


    const [items, setItem] = useState([])

    useMount(() => {
        const data = Object.keys(AdminHomeTempList).map(key => {
            const { label, child } = AdminHomeTempList[key]
            return ({
                key,
                label,
                children: Object.keys(child).map(item => (
                    <div className='AdminHomeSelect__Child' key={item} onClick={() => ModalEvent.emit(AdminHomeRenderList[item])}>
                        {child[item]({})}
                    </div>
                ))
            })
        })
        setItem(data)
    })

    if (items) {
        return (
            <div className='AdminHomeSelect'>
                <Collapse items={items} defaultActiveKey={[1]} />
            </div>
        )
    }

}

export default AdminHomeSelect;